<template>
	<view class="info-container">
		<!-- 头部信息 -->
		<view class="header" :style="{ marginTop: statusBarHeight + 30 + 'px' }">
			<view class="avatar-container">
				<image 
					class="avatar" 
					:src="getCurrentUserAvatarOrDefault()"
					mode="aspectFill" 
					alt="用户头像" 
					@tap="previewAvatar"
				/>
				<view class="edit-avatar">
					<view class="circle">
						<uni-icons type="camera" size="20" color="#fff"></uni-icons>
						<button open-type="chooseAvatar" @chooseavatar="onChooseAvatar">111</button>
					</view>
				</view>
			</view>
			<text class="name" @tap="openPopup('username')">
				{{ currentUser.getCurrentUser().username }}
			</text>
		</view>

		<!--其他信息-->
		<view class="form-container">
			<!--手机号-->
			<view class="info-item" @tap="openPopup('phone')">
				<text class="label">手机号</text>
				<view class="value-container">
					<text class="value">{{ currentUser.getCurrentUser().phone || '未填写' }}</text>
					<uni-icons type="forward" size="16" color="#999"></uni-icons>
				</view>
			</view>
			<!--我的优惠券-->
			<view class="info-item" @tap="gotoCouponListPage">
				<text class="label">优惠券</text>
				<view class="value-container">
					<text class="value">{{ couponCount }}张</text>
					<uni-icons type="forward" size="16" color="#999"></uni-icons>
				</view>
			</view>
			<!--联系客服-->
			<view class="info-item">
				<text class="label">联系客服</text>
				<view class="value-container">
					<text class="value"></text>
					<uni-icons type="forward" size="16" color="#999"></uni-icons>
				</view>
				<button open-type="contact">xxx</button>
			</view>
		</view>

		<!-- 普通弹窗 -->
		<uni-popup ref="popup">
			<view class="popup-content">
				<view class="popup-header">
					修改个人信息
				</view>
				<view class="nickname" v-if="selectedProperty === 'username'">
					<view class="icon">
						<uni-icons type="person" size="25" color="#2196F3"></uni-icons>
					</view>
					<input 
						type="nickname" 
						placeholder="请输入昵称" 
						:value="userinfo.username" 
						@change="onNicknameInput" 
						confirm-type="done" 
						@confirm="submit" 
					/>
				</view>
				<view class="phone" v-if="selectedProperty === 'phone'">
					<view class="icon">
						<uni-icons type="phone" size="25" color="#2196F3"></uni-icons>
					</view>
					<input 
						type="tel" 
						maxlength="11" 
						placeholder="请输入电话" 
						v-model="userinfo.phone" 
						confirm-type="done"
						@confirm="submit" 
					/>
				</view>
				<button class="btn"  v-if="selectedProperty === 'phone'" open-type="getPhoneNumber" @getphonenumber="getUserPhone">
					手机号快捷登录
				</button>
				<button class="btn" @tap="submit">
					提交
				</button>
			</view>
		</uni-popup>

	</view>
</template>

<script setup>
import { nextTick, onMounted, ref } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import { getMyCouponCount } from '@/api/coupon.js'
import { apiUpload } from '@/api/upload.js'
import { getCurrentUserAvatarOrDefault } from '@/utils/imageUtil.js'
import { useUserStore } from '@/stores/userStore.js'
import { getPhoneByCode, updateUserInfoById } from '@/api/user.js'

const statusBarHeight = uni.getSystemInfoSync().statusBarHeight

const currentUser = useUserStore()

const couponCount = ref(0)

const popup = ref(null)

const selectedProperty = ref('username')
const userinfo = ref({
	username: '',
	phone: ''
})

// 预览头像
function previewAvatar () {
	uni.previewImage({
		urls: [getCurrentUserAvatarOrDefault()],
		current: 0
	})
}

// 去优惠券列表
function gotoCouponListPage () {
	uni.navigateTo({
		url: '/pages/mine/coupon-list'
	})
}

// 用户选择头像
function onChooseAvatar (e) {
	const { avatarUrl } = e.detail
	// 上传头像
	apiUpload(avatarUrl).then(res => {
		const data = JSON.parse(res.data)
		const imgUrl = data.data
		// console.log(imgUrl)
		updateUserInfoById({ avatar: imgUrl }).then(res => {
			currentUser.refreshCurrentUser()
			popup.value.close()
		})
	})
}

// 修改信息弹窗
function openPopup (property) {
	selectedProperty.value = property
	if (selectedProperty.value === 'username') {
		userinfo.value.username = currentUser.getCurrentUser().username
	} else if (selectedProperty.value === 'phone') {
		userinfo.value.phone = currentUser.getCurrentUser().phone
	}
	popup.value.open('center')
}

// 用户昵称变动
function onNicknameInput (e) {
	// console.log(e.detail.value)
	userinfo.value.username = e.detail.value
}
// 获取手机号
function getUserPhone (e) {
	if (e.detail.code) {
		getPhoneByCode(e.detail.code).then(res => {
			userinfo.value.phone = res.data
		})
	}
}

// 信息校验
function validateForm () {
	let errInfo = ''
	if (selectedProperty.value === 'username' && !userinfo.value.username) {
		errInfo = '请输入昵称'
	} else if (selectedProperty.value === 'phone' && !/^1[3-9]\d{9}$/.test(userinfo.value.phone)) {
		errInfo = '手机号格式错误'
	}
	if (errInfo) {
		uni.showToast({
			icon: 'none',
			title: errInfo
		})
		return false
	}
	return true
}
function submit () {
	nextTick(() => {
		if (!validateForm()) return
		updateUserInfoById(userinfo.value).then(res => {
			currentUser.refreshCurrentUser()
			popup.value.close()
		})
	})
}

// 查询优惠券数量
onShow(() => {
	getMyCouponCount().then(res => {
		couponCount.value = res.data
	})
})
</script>

<style lang="scss">
view {
	box-sizing: border-box;
}
.info-container {
	padding: 20rpx;
	min-height: 100vh;
	
	background: // 上面的层级更高
		linear-gradient(to bottom, transparent, #f8f8f8 430rpx), // 从上到下，由透明色变为白色
		linear-gradient(to right, #beecd8 20%, #F4E2D8);      // 从左到右

	.header {
		display: flex;
		flex-direction: column;
		align-items: center;
		border-radius: 20rpx;
		margin-bottom: 20rpx;

		.avatar-container {
			position: relative;
			width: 160rpx;
			height: 160rpx;
			margin-bottom: 20rpx;

			.avatar {
				width: 100%;
				height: 100%;
				border-radius: 50%;
				border: 4rpx solid #f0f0f0;
			}

			.edit-avatar {
				position: absolute;
				right: 0;
				bottom: 0;
				width: 50rpx;
				height: 50rpx;
				background-color: #007AFF;
				border-radius: 50%;
				.circle {
					width: 100%;
					height: 100%;
					overflow: hidden;
					display: flex;
					justify-content: center;
					align-items: center;
					position: relative;
					button {
						position: absolute;
						left: 0;
						bottom: 0;
						left: 0;
						right: 0;
						overflow: hidden;
						opacity: 0;
					}
				}
				
			}
		}

		.name {
			max-width: 400rpx;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			font-size: 36rpx;
			font-weight: bold;
			color: #333;
		}
	}

	.form-container {
		background-color: #fff;
		border-radius: 14rpx;
		overflow: hidden;
		margin-top: 40rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

		.info-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 30rpx;
			border-bottom: 1rpx solid #f0f0f0;
			position: relative;

			&:last-child {
				border-bottom: none;
			}

			.label {
				font-size: 30rpx;
				color: #333;
			}

			.value-container {
				display: flex;
				align-items: center;

				.value {
					font-size: 28rpx;
					color: #666;
					margin-right: 10rpx;
				}
			}
		
			// 客服
			button {
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				opacity: 0;
			}
		}
	}

	.popup-content {
		background-color: #fff;
		width: 600rpx;
		border-radius: 30rpx;
		padding: 30rpx;
		
		.popup-header {
			font-weight: 600;
		}
		
		.nickname, .phone {
			margin-top: 30rpx;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1rpx solid #ddd;
			.icon {
				margin-right: 30rpx;
				display: flex;
				align-items: center;
			}
			input {
				flex: 1;
				width: 100%;
				border-radius: 10rpx;
				// text-align: center;
				padding: 15rpx 0;
				font-size: 30rpx;
				border: none;
			}
		}
		
		.btn {
			margin-top: 30rpx;
			padding: 10rpx 0;
			width: 100%;
			text-align: center;
			background: linear-gradient(135deg, #2196F3, #21CBF3);
			color: #fff;
			font-size: 26rpx;
			transition: all 0.3s ease;
			&:active {
				background: linear-gradient(135deg, #1b8bf3, #1bc5f3);
			}
		}
		
	}

}
</style>